<template>
  <div class="resetPassword">
    <c-form
      v-model="form"
      ref="form"
      :data="formData"
      :showLabel="false"
      :rules="rules"
      @validate="validate"
      :col="{ labelCol: { span: 5 }, wrapperCol: { span: 19 } }"
      @submit="submit"
      :submitLoading="submitLoading"
    >
      <template v-slot:captchaCode="{ change }">
        <a-input-group compact>
          <a-input
            v-model="form.captchaCode"
            ref="userNameInput"
            style="width: 65%"
            placeholder="请输入图形验证码"
            @change="change('captchaCode')"
          >
            <c-icon type="tupian" slot="prefix" size="14" />
          </a-input>
          <img
            :src="graphicUrl"
            style="width: 35%"
            class="cursor-pointer graphicCode"
            @click="getCaptcha"
            alt=""
            v-if="graphicUrl"
          />
          <c-button type="primary" width="35%" @click="getCaptcha" v-else
            >获取验证码</c-button
          >
        </a-input-group>
      </template>
      <template v-slot:phoneCode="{ change }">
        <a-input-group compact>
          <a-input
            v-model="form.phoneCode"
            style="width: 65%"
            @change="change('registerCode')"
            placeholder="请输入验证码"
          >
            <template v-slot:prefix>
              <c-icon type="xiaoxi" size="14" />
            </template>
          </a-input>
          <c-button
            type="primary"
            width="35%"
            :loading="getRegisterCodeLoading"
            :disabled="getRegisterCodeDisabled"
            @click="getGraphic"
            >{{ getRegisterCodeText }}</c-button
          >
        </a-input-group>
      </template>
    </c-form>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import {
  resetPasswordCaptcha,
  sendResetPasswordCode,
  resetPassword
} from "@/api/login";

export default {
  data() {
    return {
      form: {
        phone: null,
        captchaCode: null,
        phoneCode: null,
        password: null
      },
      formData: [
        {
          label: "手机号",
          prop: "phone",
          prefix: "phone",
          disabled: false
        },
        {
          label: "图形验证码",
          prop: "captchaCode",
          slot: "captchaCode"
        },
        {
          label: "短信验证码",
          prop: "phoneCode",
          slot: "phoneCode"
        },
        {
          label: " ",
          prop: "hidden1"
          // hidden: true
        },
        {
          label: " ",
          prop: "hidden2",
          inputType: "password"
        },
        {
          label: "新密码",
          prop: "password",
          type: "password",
          prefix: "mima1"
        },
        {
          label: " ",
          type: "submit",
          submitText: "确认重置密码"
        }
      ],
      rules: {
        phone: [
          { required: true, validator: this.$vd.phone, trigger: "change" }
        ],
        captchaCode: [
          { required: true, message: "请输入图形验证码", trigger: "change" }
        ],
        phoneCode: [
          { required: true, message: "请输入验证码", trigger: "change" }
        ],
        password: [
          { required: true, validator: this.$vd.passWord, trigger: "change" }
        ]
      },
      getRegisterCodeText: "获取验证码",
      getRegisterCodeDisabled: true,
      getRegisterCodeLoading: false,
      graphicUrl: null,
      submitLoading: false,
      timer: null
    };
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    ...mapActions(["logout"]),
    // 触发表单校验的回调事件
    validate(data) {
      if (data.prop === "phone") {
        if (data.status && this.getRegisterCodeText === "获取验证码") {
          this.getRegisterCodeDisabled = false;
        } else {
          this.getRegisterCodeDisabled = true;
        }
      }
    },
    // 获取图片验证码
    getCaptcha() {
      resetPasswordCaptcha().then(res => {
        this.graphicUrl = URL.createObjectURL(res);
      });
    },
    // 发送短信验证码
    getGraphic() {
      this.getRegisterCodeLoading = true;
      sendResetPasswordCode({
        captchaCode: this.form.captchaCode,
        phone: this.form.phone
      })
        .then(() => {
          this.countdown();
          this.$message.success("验证码已发送");
          this.getRegisterCodeDisabled = true;
        })
        .catch(() => {
          this.getCaptcha();
        })
        .finally(() => {
          this.getRegisterCodeLoading = false;
        });
    },
    // 发送短信倒计时
    countdown() {
      let sec = 120;
      this.timer = setInterval(() => {
        if (sec <= 0) {
          this.getRegisterCodeText = "获取验证码";
          this.getRegisterCodeDisabled = false;
          clearInterval(this.timer);
        } else {
          this.getRegisterCodeText = `重发(${sec--}s)`;
        }
      }, 1000);
    },
    // 重置密码
    submit() {
      this.submitLoading = true;
      resetPassword(this.form)
        .then(() => {
          this.logout();
          this.submitLoading = false;
          this.$emit("resetFinish");
        })
        .catch(() => {
          this.getCaptcha();
        })
        .finally(() => {
          this.submitLoading = false;
        });
    },
    // 清除倒计时
    clearCountdown() {
      clearInterval(this.timer);
      this.timer = null;
      this.getRegisterCodeText = "获取验证码";
      this.getRegisterCodeDisabled = false;
    }
  },
  created() {
    if (this.user.userData && this.user.userData.phone) {
      this.getRegisterCodeDisabled = false;
      this.form.phone = this.user.userData.phone;
      this.formData.forEach(item => {
        if (item.prop === "phone") item.disabled = true;
      });
    }
  },
  mounted() {
    this.getCaptcha();
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/theme/color.scss";

.resetPassword {
  width: 300px;
  margin: 0 auto;
  .graphicCode {
    // border: 1px solid #d9d9d9;
    // border-left: 0;
    height: 32px;
    padding: 0 5px;
  }
  ::v-deep.ant-input-prefix .iconfont {
    @extend .primary;
  }
  .c-form {
    ::v-deep .ant-form-item:nth-child(4),
    ::v-deep .ant-form-item:nth-child(5) {
      height: 0px;
      overflow: hidden;
      margin: 0;
    }
  }
}
</style>
